<template>
	<view class="mineCollectPage">
		<view class=" flex-row-center nav-box1">
			<view @click="navItemClick(index)" class="nav-item1" :class="titleIndex == index?'nav-item1-sel':''" v-for="(item,index) in titleArr" :key="index">{{item}}</view>
		</view>
		<view style="height: 80rpx;"></view>
		<view @click="itemClick(item.id)" class="flex-row-start newItem" v-for="(item,index) in dataArr" :key="index">
			
			<image style="width: 120rpx; height: 120rpx;" :src="item.item_image"></image>
			
			<view class="flex-colume-start" style="align-items: flex-start; height: 120rpx; margin-left: 20rpx;">
				<view style="font-size: 28rpx;">{{item.item_name}}</view>
			</view>
			
		</view>
		<view v-if="showEmpty" style="width: 750rpx; text-align: center; font-size: 28rpx; line-height: 50vh;">暂无数据</view>
	</view>
</template>

<script>
	import { collectList } from '@/api/api';
	export default {
		data() {
			return {
				titleArr:['商品','新闻','视频'],
				titleIndex:0,
				dataArr:[],
				showEmpty:false
				
			}
		},
		onLoad(e){
			uni.setNavigationBarTitle({
				title:e.index==1?'我的喜欢':'我的收藏'
			})
			this.requestList()
		},
		onShow(){
			if (this.dataArr.length > 0){
				this.requestList()
			}
		},
		methods: {
			navItemClick(index){
				if (this.titleIndex == index){
					return
				}
				this.titleIndex = index
				this.requestList()
			},
			requestList(){
				var typeArr = ['goods','article','video']
				this.showEmpty = false
				collectList({type:typeArr[this.titleIndex]}).then(res=>{
					if (res.code == 200){
						this.dataArr = res.data
						if (this.dataArr.length == 0){
							this.showEmpty = true
						}
					}
					
				})
			},
			itemClick(id){
				if (this.titleIndex == 0){
					uni.navigateTo({
						url:'/pages/goods/goodsDetail?goodsId='+id
					})
				}
				if (this.titleIndex == 1){
					uni.navigateTo({
						url:'/pages/index/newsDetail?id='+id
					})
				}
				if (this.titleIndex == 2){
					uni.navigateTo({
						url:'/pages/index/videoDetail?id='+id
					})
				}
				
			}
			
		}
	}
</script>

<style lang="scss">
	.nav-box1{
		position: fixed;
		width: 749rpx;
		border: 1px solid rgb(238, 238, 238);
		height: 80rpx;
		left: 0.5rpx;
		background-color: white;
		.nav-item1{
			font-size: 28rpx;
			font-weight: 500;
			padding: 0rpx 20rpx;
			margin-left: 50rpx;
			margin-right: 50rpx;
			line-height: 76rpx;
			border-bottom: 4rpx solid rgba(0, 0, 0, 0);
		}
		.nav-item1-sel{
			color: #DE2929;
			border-bottom: 4rpx solid #DE2929;
		}
	}
	.newItem{
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		width: 700rpx;
		margin-left: 25rpx;
		background-color: white;
		padding: 25rpx;
		border-radius: 10rpx;
		box-sizing: border-box;
	}

</style>
